<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像上传</title>
    <style>
        #avatar {
            margin: 80px auto;
            margin-bottom: 20px;
            height: 400px;
            width: 400px;
            border: 1px solid;
            position: relative;
        }

        svg, .progress, img, input {
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
        }

        svg {
            display: block;
        }

        .progress {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 60px;
        }

        img {
            display: none;
        }

        input {
            opacity: 0;
            display: block;
            background: transparent;
        }


        button {
            display: block;
            margin: 0 auto;
            width: 400px;
            background-color: #0c9a0c;
            color: white;
            border: 0;
            height: 30px;
            position: relative;
        }

        button > span {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            background-color: white;
            height: inherit;
        }
    </style>
</head>
<body>

<div id="avatar">
    <svg t="1697025460201" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="4018" width="48" height="48">
        <path d="M896 544H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h768c17.6 0 32 14.4 32 32s-14.4 32-32 32zM512 928c-17.6 0-32-14.4-32-32V128c0-17.6 14.4-32 32-32s32 14.4 32 32v768c0 17.6-14.4 32-32 32z"
              fill="#707070" p-id="4019"></path>
    </svg>
    <div class="progress"></div>
    <img src="" alt="">
    <input type="file">
</div>
<button onclick="send()">保存
    <span></span></button>
</body>
<script>
    const svg = document.querySelector('svg');
    const progress = document.querySelector('.progress');
    const img = document.querySelector('img');
    const input = document.querySelector('input[type="file"]');
    const btn_span = document.querySelector('button>span');
    const formData = new FormData();
    const xhr = new XMLHttpRequest();
    const reader = new FileReader();
    const send = () => {
        formData.append('avatar', input.files[0]);
        formData.append('username', 'zhou')
        xhr.open('POST', '/upload/');
        xhr.send(formData);
        progress.innerText = `0%`;
        img.style.display = 'none';
        btn_span.style.width = 'inherit';
    }
    xhr.upload.addEventListener('progress', e => {
        svg.style.display = 'none';
        btn_span.style.width = `${((1 - e.loaded / e.total) * 100).toFixed(1)}%`;
        progress.innerText = `${(e.loaded / e.total * 100).toFixed(1)}%`;
        if (e.loaded === e.total) {
            reader.readAsDataURL(input.files[0]);
            reader.onload = () => {
                img.style.display = 'block';
                img.src = reader.result;
            }
        }
    })
</script>

</html>

